import tools from "../../../../../../public/tools";
import starModel from "../../../../../../public/model/starModel";
export default class templateWeb {
    constructor(record) {
        this.set(record);
        this.source={};
    }
    static create(record=templateWeb.webTpl()){
        return new templateWeb(record);
    }
    set(record){
        if(!!record){
            this.record=record;
        }else{
            this.record={};
        }
    }
    /**layout*/
    findLayoutNode(id){
        let treeObject=tools.treeData.create(this.record.layout);
        treeObject.findNode(id);
        return treeObject.node;
    }
    addLayoutNode(id){
        let newItem=templateWeb.layoutRowTpl();
        newItem.pid=id;
        newItem.name=this.setNewName('layoutItem',this.record.layout,'name')
        this.record.layout.push(newItem);
        return newItem;
    }
    deleteLayoutNode(id){
        if(id==='elementRoot') return;
        let treeObject=tools.hierData.create(this.record.layout);
        treeObject.removeNode(id);
        this.record.layout=treeObject.tree;
    }
    addElement(id,type){
        let element=this.getElementTpl(type);
        element.name=this.setNewName('elementItem',this.record.elements,'name');
        element.address=id;
        this.record.elements.push(element)
    }
    removeElement(id){
        let index=this.record.elements.findIndex(item=>item.id===id);
        if(index===-1) return;
        this.record.elements.splice(index,1)
    }
    addSourceItem(){
        this.record.source.push(templateWeb.sourceItemTpl())
    }
    getColumn(type){
        let ele=this.getElementTpl(type);
        return ele.config.attr.columns[0]
    }
    getParentColumn(type){
        let ele=this.getElementTpl(type);
        return ele.config.attr.parentColumns[0]
    }
    /**tpl*/

    duplicateCheck(array,name,value){
        return !!array.find(item=>item[name]===value)
    }
    setNewName(prefix,array,name,number=100){
        let res=prefix+1000;
        for(let i=0;i<=number;i++){
            let value=prefix+i;
            if(!this.duplicateCheck(array,name,value)){
                res=value;
                break;
            }
        };
        return res;
    }
    getStatic(fnName){
        return templateWeb[fnName]();
    }
    getSourceOptions(){
        let treeObject=tools.hierData.create(this.record.layout);
        let allLeaf=treeObject.findAllLeaf();
        return tools.getOptions(allLeaf,'name','id')
    }
    async loadData(){
        for(let i=0;i<this.record.source.length;i++){
            let clz=starModel.create(this.record.source[i].model+'Collection');
            let clzIns=starModel.create(this.record.source[i].model);
            let condition=`type='${this.record.source[i].type}' and className='${this.record.source[i].className}'`
            if(!!this.record.source[i].condition){
                condition=condition+' and '+this.record.source[i].condition
            };
            let data=await clz.query(condition);
            this.source[this.record.source[i].name]={
                config:this.record.source[i],
                clz,
                clzIns,
                data:clz.records
            }
        };
        this.record.elements.map(item=>{
            if(!!item.sourceTarget&&!!item.source&&!!this.source[item.source]&&!!this.source[item.source].data){
                item.config.attr[item.sourceTarget]=this.source[item.source].data;
            }

        })
        console.log(this);
    }
    async updateData(){
        let list=Object.values(this.source);
        for(let i=0;i<list.length;i++){
            for(let j=0;j<list[i].clz.records.length;j++){
                list[i].clzIns.setRecord(list[i].clz.records[j]);
                await list[i].clzIns.updateById()
            }
        }
    }


    /**layout的tpl*/
    static webTpl(){
        return {
            layout:[
                {
                    id:'elementRoot',
                    pid:'',
                    name:'root',
                    elementType:'layout',
                    attr:{},
                    style:{
                        flexWrap:'noWrap',
                        flexDirection:'row',
                        justifyContent:'center',
                        alignItems:'center',
                        width:'100%',
                        height:'100%',
                        borderWidth:'1px',
                        borderColor:'gray',
                        borderStyle:'solid',
                        backgroundColor:'#ffffff'
                    }
                },
                // templateWeb.layoutRowTpl()
            ],
            elements:[
                // templateWeb.tableConfig()
            ],
            source:[
                {
                    name:'source0',
                    model:'consume',
                    type:'rawMaterial',
                    className:'xxx',
                    condition:'',
                }
            ]
        }
    }
    static layoutRowTpl(){
        return {
            id:tools.uuid(),
            pid:'elementRoot',
            name:'root',
            elementType:'layout',
            attr:{},
            style:{
                flexWrap:'noWrap',
                flexDirection:'row',
                justifyContent:'center',
                alignItems:'center',
                width:'50%',
                height:'50%',
                borderWidth:'1px',
                borderColor:'gray',
                borderStyle:'solid',
                padding:'0px 0px',
                backgroundColor:'#ffffff'
            }
        }
    }
    layoutRowFieldTpl(){
        return [
            {title:'id',key:'id',config:{type:'display'}},
            {title:'pid',key:'pid',config:{type:'display'}},
            {title:'name',key:'name',config:{type:'text'}},
            {title:'flexWrap',key:'style.flexWrap',config:{type:'select',options:[{label:'nowrap',value:'nowrap'},{label:'wrap',value:'wrap'},{label:'wrap-reverse',value:'wrap-reverse'}]}},
            {title:'flexDirection',key:'style.flexDirection',config:{type:'select',options:[{label:'row',value:'row'},{label:'row-reverse',value:'row-reverse'},{label:'column',value:'column'},{label:'column-reverse',value:'column-reverse'}]}},
            {title:'justifyContent',key:'style.justifyContent',config:{type:'select',options:[{label:'flex-start',value:'flex-start'},{label:'flex-end',value:'flex-end'},{label:'center',value:'center'},{label:'stretch',value:'stretch'},{label:'space-around',value:'space-around'},{label:'space-between',value:'space-between'},{label:'space-evenly',value:'space-evenly'}]}},
            {title:'alignItems',key:'style.alignItems',config:{type:'select',options:[{label:'flex-start',value:'flex-start'},{label:'flex-end',value:'flex-end'},{label:'center',value:'center'},{label:'stretch',value:'stretch'}],}},
            {title:'width',key:'style.width',config:{type:'text'}},
            {title:'height',key:'style.height',config:{type:'text'}},
            {title:'borderWidth',key:'style.borderWidth',config:{type:'text'}},
            {title:'borderColor',key:'style.borderColor',config:{type:'color'}},
            {title:'borderStyle',key:'style.borderStyle',config:{type:'select',options:[{label:'none',value:'none'},{label:'solid',value:'solid'},{label:'dotted',value:'dotted'}]}},
            {title:'padding',key:'style.padding',config:{type:'text'}},
            {title:'backgroundColor',key:'style.backgroundColor',config:{type:'color'}},
        ]
    }

    /**element*/
    static elementList(){
        return [
            {label:'cliTable',value:'cliTable'},
            {label:'cliForm',value:'cliForm'},
            {label:'span',value:'span'},
        ]
    }
    getElementList(){
        return templateWeb.elementList();
    }
    getElementTpl(type){
        return templateWeb.elementsTpl().find(item=>item.tag===type);
    }
    static elementsTpl(){
        return [
            {
                id:tools.uuid(),
                name:'table',
                address:'elementRoot',
                elementType:'element',
                tag:'cliTable',
                source:'',
                sourceTarget:'data',
                config:{
                    attr:{
                        isParentColumns:false,
                        columns:[
                            {
                                title:'abc1',
                                key:'values.abc1',
                                width:'auto',
                                align:'center',
                                config:{
                                    type:'text',
                                }
                            },
                        ],
                        parentColumns:[
                            {
                                title: 'sub',
                                align: 'center',
                                children: []
                            }
                        ],
                        data:[
                            /*{
                                type:'crawMaterial',
                                className:'bill',
                                values:{
                                    abc1:'abc1111',
                                    abc2:'abc2'
                                },
                                hier:{
                                    type:'',
                                    content:[
                                        {id:'',values:{status:true}}
                                    ]
                                }
                            },*/
                        ]
                    },
                    style:{
                        width:'100%',
                        height:'100%',
                        borderWidth:'1px',
                        borderColor:'gray',
                        borderStyle:'solid',
                        margin:'0px 0px',
                        flexGrow:0,
                        flexShrink:0
                    },

                }
            },
            {
                id:tools.uuid(),
                name:'span',
                address:'elementRoot',
                elementType:'element',
                tag:'span',
                source:'',
                sourceTarget:'text',
                config:{
                    attr:{
                    },
                    style:{
                        fontSize:'14px',
                        color:'black',
                        fontWeight:'normal',
                    },
                    text:''
                }
            },
            {
                id:tools.uuid(),
                name:'form',
                address:'elementRoot',
                elementType:'element',
                tag:'cliForm',
                source:'',
                sourceTarget:'data',
                config:{
                    attr:{
                        labelWidth:100,
                        labelPosition:'right',
                        cols:1,
                        onlyRead:false,
                        labelStyle:{
                            fontSize:'14px',
                            color:'black',
                            fontWeight:'normal',
                        },
                        columns:[
                            {
                                title:'abc1',
                                key:'abc1',
                                config:{
                                    type:'text',
                                },
                                validate:{
                                    require:true,
                                    type:'any',
                                    message:'error',
                                    trigger:'blur'
                                }
                            },
                        ],
                        data:{
                            abc1:'abc1'
                        }
                    },
                    style:{
                        width:'100%',
                        height:'100%',
                        borderWidth:'1px',
                        borderColor:'gray',
                        borderStyle:'solid',
                        margin:'0px 0px',
                        flexGrow:0,
                        flexShrink:0
                    },

                }
            },
        ]
    }

    /**element：table*/
    cliTableFieldTpl(){
        return [
            {title:'tag',key:'tag',config:{type:'display'}},
            {title:'address',key:'address',config:{type:'select',options:this.getSourceOptions()}},
            {title:'id',key:'id',config:{type:'display'}},
            {title:'name',key:'name',config:{type:'text'}},
            {title:'isParentColumns',key:'config.attr.isParentColumns',config:{type:'check'}},
            {title:'source',key:'source',config:{type:'select',options:tools.getOptions(this.record.source,"name",'name')}},
        ]
    }
    cliTableStyleTpl(){
        return [
            {title:'width',key:'config.style.width',config:{type:'text'}},
            {title:'height',key:'config.style.height',config:{type:'text'}},
            {title:'borderWidth',key:'config.style.borderWidth',config:{type:'text'}},
            {title:'borderColor',key:'config.style.borderColor',config:{type:'color'}},
            {title:'borderStyle',key:'config.style.borderStyle',config:{type:'select',options:[{label:'none',value:'none'},{label:'solid',value:'solid'},{label:'dotted',value:'dotted'}]}},
            {title:'margin',key:'config.style.margin',config:{type:'text'}},
            {title:'flexGrow',key:'config.style.flexGrow',config:{type:'number',min:0,max:1,step:1}},
            {title:'flexShrink',key:'config.style.flexShrink',config:{type:'number',min:0,max:1,step:1}},
        ]
    }
    cliTableColumnFieldTpl(){
        return [
            {title:'title',key:'title',config:{type:'text'}},
            {title:'key',key:'key',config:{type:'text'}},
            {title:'width',key:'width',config:{type:'text'}},
            {title:'align',key:'align',config:{type:'select',options:[
                        {label:'left',value:'left'},
                        {label:'center',value:'center'},
                        {label:'right',value:'right'},
                    ]}},
            {title:'editorType',key:'config.type',config:{type:'select',options:[
                        {label:'text',value:'text'},
                        {label:'number',value:'number'},
                        {label:'check',value:'check'},
                    ]}},
        ]
    }
    cliTableParentColumnFieldTpl(id){
        let ele=this.record.elements.find(item=>item.id===id);
        let options=tools.getOptions(ele.config.attr.columns,'title','key')
        return [
            {title:'title',key:'title',config:{type:'text'}},
            {title:'align',key:'align',config:{type:'select',options:[
                        {label:'left',value:'left'},
                        {label:'center',value:'center'},
                        {label:'right',value:'right'},
                    ]}},
            {title:'children',key:'children',config:{type:'multiSelect',options:options}},
        ]
    }
    /**element：span*/
    spanFieldTpl(){
        return [
            {title:'tag',key:'tag',config:{type:'display'}},
            {title:'address',key:'address',config:{type:'select',options:this.getSourceOptions()}},
            {title:'id',key:'id',config:{type:'display'}},
            {title:'name',key:'name',config:{type:'text'}},
            {title:'source',key:'source',config:{type:'select',options:tools.getOptions(this.record.source,"name",'name')}},
            {title:'text',key:'config.text',config:{type:'text'}},
            {title:'fontSize',key:'config.style.fontSize',config:{type:'text'}},
            {title:'color',key:'config.style.color',config:{type:'color'}},
            {title:'fontWeight',key:'config.style.fontWeight',config:{type:'select',options:[{label:'normal',value:'normal'},{label:'bold',value:'bold'},{label:'bolder',value:'bolder'},{label:'lighter',value:'lighter'},]}},
        ]
    }
    /**element：span*/
    cliFormFieldTpl(){
        return [
            {title:'tag',key:'tag',config:{type:'display'}},
            {title:'address',key:'address',config:{type:'select',options:this.getSourceOptions()}},
            {title:'id',key:'id',config:{type:'display'}},
            {title:'name',key:'name',config:{type:'text'}},
            {title:'source',key:'source',config:{type:'select',options:tools.getOptions(this.record.source,"name",'name')}},
            {title:'labelWidth',key:'config.attr.labelWidth',config:{type:'number',min:0,step:1}},
            {title:'labelPosition',key:'config.attr.labelPosition',config:{type:'select',options:[{label:'left',value:'left'},{label:'right',value:'right'},{label:'top',value:'top'}]}},
            {title:'cols',key:'config.attr.cols',config:{type:'number',min:1,step:1}},
            {title:'onlyRead',key:'config.attr.onlyRead',config:{type:'check'}},
            {title:'fontSize',key:'config.attr.labelStyle.fontSize',config:{type:'text'}},
            {title:'color',key:'config.attr.labelStyle.color',config:{type:'color'}},
            {title:'fontWeight',key:'config.attr.labelStyle.fontWeight',config:{type:'select',options:[{label:'normal',value:'normal'},{label:'bold',value:'bold'},{label:'bolder',value:'bolder'},{label:'lighter',value:'lighter'},]}},
        ]
    }
    cliFormStyleTpl(){
        return [
            {title:'width',key:'config.style.width',config:{type:'text'}},
            {title:'height',key:'config.style.height',config:{type:'text'}},
            {title:'borderWidth',key:'config.style.borderWidth',config:{type:'text'}},
            {title:'borderColor',key:'config.style.borderColor',config:{type:'color'}},
            {title:'borderStyle',key:'config.style.borderStyle',config:{type:'select',options:[{label:'none',value:'none'},{label:'solid',value:'solid'},{label:'dotted',value:'dotted'}]}},
            {title:'margin',key:'config.style.margin',config:{type:'text'}},
            {title:'flexGrow',key:'config.style.flexGrow',config:{type:'number',min:0,max:1,step:1}},
            {title:'flexShrink',key:'config.style.flexShrink',config:{type:'number',min:0,max:1,step:1}},
        ]
    }
    cliFormColumnFieldTpl(){
        return [
            {title:'title',key:'title',config:{type:'text'}},
            {title:'key',key:'key',config:{type:'text'}},
            {title:'editorType',key:'config.type',config:{type:'select',options:[
                        {label:'text',value:'text'},
                        {label:'number',value:'number'},
                        {label:'check',value:'check'},
                    ]}},
            {title:'require',key:'validate.require',config:{type:'check'}},
            {title:'type',key:'validate.type',config:{type:'text'}},
            {title:'message',key:'validate.message',config:{type:'text'}},
            {title:'trigger',key:'validate.trigger',config:{type:'select',options:[{label:'change',value:'change'},{label:'blur',value:'blur'},]}},
        ]
    }
    /**source*/
    static sourceItemTpl(){
        return {
            name:'',
            model:'',
            type:'',
            className:'',
            condition:'',
        }
    }
    sourceFieldTpl(){
        return [
            {title:'name',key:'name',config:{type:'text'}},
            {title:'model',key:'model',config:{type:'text'}},
            {title:'type',key:'type',config:{type:'text'}},
            {title:'className',key:'className',config:{type:'text'}},
            {title:'condition',key:'condition',config:{type:'text'}},
        ]
    }
    /**static tpl*/




    static gridTableConfig() {
        return {
            address: 'root',
            type: 'gridTable',
            config: {
                style:{},
                attr:{
                    columnHeaderHeight:'50px',
                    rowHeaderWidth:'50px',
                    width:'100%',
                    height:'100%',
                    gridRowGap:1,
                    gridColumnGap:1,
                    columnHeader:{
                        backgroundColor:'#f8f8f9',
                        rowNumber:1,
                        columnNumber:1,
                        gridRowGap:0,
                        row:['auto'],
                        column:['auto'],
                        fields:[
                            {name:'field0',RT:1,RB:2,CL:1,CR:2,bkColor:'#ffffff',size:14,weight:700,color:"black",horizontal:'center',vertical:'center'},
                        ]
                    },
                    rowHeader:{
                        backgroundColor:'#f8f8f9',
                        rowNumber:1,
                        columnNumber:1,
                        gridColumnGap:0,
                        row:['auto'],
                        column:['auto'],
                        fields:[
                            {name:'field1',RT:1,RB:2,CL:1,CR:2,bkColor:'#ffffff',size:14,weight:700,color:"black",horizontal:'center',vertical:'center'}
                        ]
                    }
                }
            }
        }
    }

}
